/*
 * @Description: 预约详情
 * @Author: shuaishuai.wang
 * @Date: 2019-07-10 15:00:53
 * @Last Modified by: shuaishuai.wang
 * @Last Modified time: 2019-07-18 10:56:23
 */
<template>
  <div class="main">
    <title-bar titleText='预约详情'></title-bar>
    <div class="main_area">
      <div class="vehicle_state">
        <h3 class="fontsize32">预约码：{{appointmentData.RESERVATION_CODE}}</h3>
        <div class="step_area">
          <div
            class="step flex-h flex-vc"
            v-for="(flow, index) in flowData"
            :key="index"
          >
            <i
              class="iconfont fontsize40"
              :class="{'icon-time icon-gray': flow.DESC.indexOf('已过期') > -1, 'icon-cancel-o icon-gray': flow.DESC.indexOf('未通过') > -1, 'icon-seceed icon-gray': flow.DESC.indexOf('已取消') > -1 || flow.DESC.indexOf('完成') > -1, 'icon-seceed': flow.DESC.length == 4}"
            ></i>
            <div class="step_info">
              <p class="step_msg fontsize28">{{flow.DESC}}<i
                  v-show="flow.CAN_CLICK"
                  class="iconfont icon-info"
                  @click="showMeReason(flow.FRAME)"
                ></i></p>
              <p class="step_time fontsize24">{{flow.TIME | mescFormate}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="form_area">
        <div class="form_head flex-h flex-hsb flex-vc">
          <h3>预约信息</h3>
          <i
            v-if="appointmentData.CAN_EDIT"
            @click="editThisAppointment"
            class="iconfont icon-write fontsize32"
          ></i>
        </div>
        <table>
          <tr>
            <td>
              <p>检测类型</p>
            </td>
            <td>
              <p class="long_text fontsize28">{{appointmentData.IS_OPERATING_DESC + '-' + appointmentData.CAR_CHECK_TYPE_DESC}}</p>
            </td>
          </tr>
          <tr>
            <td>
              <p>姓名</p>
            </td>
            <td>
              <p class="long_text fontsize28">{{appointmentData.REAL_NAME}}</p>
            </td>
          </tr>
          <tr>
            <td>
              <p>手机号</p>
            </td>
            <td>
              <p class="long_text fontsize28">{{appointmentData.PHONE}}</p>
            </td>
          </tr>
          <tr>
            <td>
              <p>车牌号</p>
            </td>
            <td>
              <p class="long_text fontsize28">{{appointmentData.CAR_LICENSE_NO}}</p>
            </td>
          </tr>
          <tr v-if="appointmentData.CAR_OWN_COMPANY && appointmentData.CAR_OWN_COMPANY.length > 0">
            <td>
              <p>车辆单位</p>
            </td>
            <td>
              <p class="long_text fontsize28">{{appointmentData.CAR_OWN_COMPANY}}</p>
            </td>
          </tr>
          <tr>
            <td>
              <p>预约时间</p>
            </td>
            <td>
              <p class="long_text fontsize28">{{appointmentData.RESERVATION_DATE | timeFormate}} {{appointmentData.RESERVATION_TIME_PERIOD}}
                <br>
                <span class="fontsize24">若晚于预约时间到达则需重新排队</span>
              </p>
            </td>
          </tr>
          <tr v-if="appointmentData.IS_OPERATING < 1">
            <td>
              <p>芝麻信用截图</p>
            </td>
            <td>
              <p class="long_text fontsize28">{{appointmentData.ZHIMA_CREDIT_URL | zhimaUrlToString}}</p>
            </td>
          </tr>
          <tr>
            <td>
              <p>预约单号</p>
            </td>
            <td>
              <p class="long_text fontsize28">{{appointmentData.RESERVATION_NO}}</p>
            </td>
          </tr>
        </table>
      </div>
      <div
        class="confirm_btn"
        v-if="bottomBtnInfo.state"
      >
        <button
          @click="controlTheAppointment"
          class="fontsize32"
        >{{bottomBtnInfo.text}}</button>
      </div>
    </div>
    <!--<full-screen-cover v-show="pageState.cover">
      <div class="confirm_area">
        <h3>是否取消预约？</h3>
        <div class="confirm_btn_area">
          <button>确定</button>
          <button
            @click="pageState.cover = false"
            class="cancel_btn"
          >取消</button>
        </div>
      </div>
    </full-screen-cover>-->
    <!-- 点击取消预约时的确认弹窗 -->
    <popup
      :showState="popupState"
      :info="info"
      @cancelFun="cancelReservation"
      @confirmFun="closePopup"
    ></popup>
    <grade
      ref='grid'
      @getStar="getStar"
    ></grade>
  </div>
</template>

<script>
import { FullScreenCover, TitleBar } from 'vue-xb-ui-depot'
import { getUrlParams, AppRouterUtils } from 'vue-xiaobu-utils'
import AjaxForBusOpen from '@/utils/AjaxForBusOpen'
import { timeFormate } from './../filters'
import Popup from './../components/Popup'
import Grade from './../components/Grade'
export default {
  components: {
    FullScreenCover,
    TitleBar,
    popup: Popup,
    grade: Grade
  },
  filters: {
    mescFormate(mesc) {
      let time = new Date(mesc)
      if (mesc) {
        return time.getFullYear() + '年' + (time.getMonth() + 1).toString().padStart(2, '0') + '月' + time.getDate().toString().padStart(2, '0') + '日 ' + time.getHours().toString().padStart(2, '0') + ':' + time.getMinutes().toString().padStart(2, '0')
      }
      return ''
    },
    timeFormate,
    zhimaUrlToString(url) {
      if (url && url.length > 0) {
        return '已上传'
      }
      return '未上传'
    }
  },
  data() {
    return {
      appointmentData: {}, // 预约表单数据，具体内容按表单顺序排列
      formCheck: { // 表单检查数据
        result: false, // 结果
        reason: '' // 原因
      },
      pageState: { // 页面部分组件状态用于匹配不同状态预约详情
        edit: true, // 可编辑状态
        cover: false // 页面全屏弹窗状态
      },
      flowData: {},
      UI: '',
      Toast: '',
      System: '',
      popupState: false,
      popupType: '',
      info: {
        title: '提示',
        msg: '是否取消本次预约',
        btnLeft: '确认取消',
        btnRight: '暂不取消'
      },
      cancelTheAppointmentInfo: {
        title: '提示',
        msg: '是否取消本次预约',
        btnLeft: '确认取消',
        btnRight: '暂不取消'
      },
      bottomBtnInfo: {
        state: '',
        text: ''
      }
    }
  },
  mounted() {
    this.$UI.then(UI => {
      this.UI = UI
    })
    this.$Toast.then(Toast => {
      this.Toast = Toast
    })
    this.$System.then(System => {
      this.System = System
    })
    AjaxForBusOpen('/reservation-car-check-api/carCheck/reservation/detail', {
      ID: getUrlParams().id
    }).then(data => {
      this.flowData = data.CHECK_FLOW_LIST
      this.appointmentData = data.INFO
      this.getAppointmentCtrl()
      console.log(data)
    })
  },
  distoryed() {
    window.history.go(-1)
  },
  methods: {
    checkFormData() { // 表单必填项非空检查
      let keyArray = ['姓名', '电话号', '车牌号', '颜色', '', '日期', '时段']
      let keyIndex = 0
      for (let data in this.appointmentData) {
        if (this.appointmentData[data].length < 1 && data !== 'belong') {
          this.formCheck = {
            result: false,
            reason: keyArray[keyIndex] + '未填写'
          }
          return
        }
        keyIndex++
      }
      this.formCheck.result = true
    },
    controlTheAppointment() {
      switch (this.bottomBtnInfo.state) {
        case 'again':
          this.afreshAppointment()
          break
        case 'cancel':
          this.popupState = true
          this.popupType = 'cancel'
          break
        case 'evaluation':
          this.$refs.grid.showState = true
          break
      }
    },
    cancelReservation() { // 确认取消当前预约
      if (this.popupType === 'cancel') {
        AjaxForBusOpen('/reservation-car-check-api/carCheck/reservation/cancel', {
          ID: getUrlParams().id
        }, 2).then(() => {
          this.Toast.showShortBottom('预约已取消')
          this.popupState = false
          AjaxForBusOpen('/reservation-car-check-api/carCheck/reservation/detail', {
            ID: getUrlParams().id
          }).then(data => {
            this.flowData = data.CHECK_FLOW_LIST
            this.appointmentData = data.INFO
            this.getAppointmentCtrl()
            console.log(data)
          })
        }).catch(err => {
          if (parseInt(err.RSPCD) === 0) {
            this.Toast.showShortBottom('预约已取消')
            this.popupState = false
            AjaxForBusOpen('/reservation-car-check-api/carCheck/reservation/detail', {
              ID: getUrlParams().id
            }).then(data => {
              this.flowData = data.CHECK_FLOW_LIST
              this.appointmentData = data.INFO
              this.getAppointmentCtrl()
              console.log(data)
            })
          } else {
            this.popupState = true
            this.popupType = ''
            this.info = { // 提示确认弹窗信息
              title: '提示',
              msg: err.error.data.RSPMSG,
              btnLeft: '确认',
              btnRight: ''
            }
          }
        })
      } else {
        this.popupState = false
      }
    },
    closePopup() { // 关闭确认弹窗
      if (this.popupType !== 'again') {
        this.popupState = false
      } else {
        this.afreshAppointment()
        this.popupState = false
      }
    },
    showMeReason(reasonInfo) { // 点击问号操作显示预约取消、检测失败、过期等原因
      this.popupState = true
      this.popupType = 'again'
      if (reasonInfo.REASON) {
        this.info = {
          title: '抱歉，本次检测未通过',
          remark: [
            reasonInfo.REASON || '',
            reasonInfo.SOLUTION || ''
          ],
          btnLeft: '我知道了',
          btnRight: '重新预约'
        }
      } else {
        this.info = {
          title: '提示',
          msg: reasonInfo.TEXT,
          btnLeft: '我知道了',
          btnRight: '重新预约'
        }
      }
    },
    editThisAppointment() { // 编辑当前车检预约信息
      window.localStorage.setItem('appointment', JSON.stringify(this.appointmentData))
      AppRouterUtils.open('editAppointment.html?_tv=false&_rv=false&type=' + this.appointmentData.IS_OPERATING)
    },
    afreshAppointment() { // 重新预约
      window.localStorage.setItem('appointment', JSON.stringify(this.appointmentData))
      if (this.appointmentData.IS_OPERATING < 1) {
        AppRouterUtils.open('privateAppointment.html?_tv=false&_rv=false&state=afresh')
      } else {
        AppRouterUtils.open('operateAppointment.html?_tv=false&_rv=false&state=afresh')
      }
    },
    getAppointmentCtrl() { // 判断当前预约可操作的状态
      if (this.appointmentData.CAN_CANCEL < 1) { // 当前不可取消预约
        if (this.appointmentData.CAN_EVALUATION < 1) { // 当前不可评价
          if (this.flowData[this.flowData.length - 1].DESC !== '检测完成') { // 当前可以重新预约
            this.bottomBtnInfo = {
              state: 'again',
              text: '重新预约'
            }
          } else {
            this.bottomBtnInfo = {
              state: '',
              text: ''
            }
          }
        } else if (this.appointmentData.CAN_EVALUATION > 1) {
          this.bottomBtnInfo = {
            state: 'again',
            text: '重新预约'
          }
        } else {
          this.bottomBtnInfo = {
            state: 'evaluation',
            text: '立即评价'
          }
        }
      } else {
        this.bottomBtnInfo = {
          state: 'cancel',
          text: '取消预约'
        }
      }
    },
    getStar(star) {
      AjaxForBusOpen('/reservation-car-check-api/carCheck/reservation/evaluation', {
        'ID': getUrlParams().id,
        'EVALUATION_STAR_RATING': star
      }, 2).then(() => {
        this.Toast.showShortBottom('感谢您对我们的支持')
        AjaxForBusOpen('/reservation-car-check-api/carCheck/reservation/detail', {
          ID: getUrlParams().id
        }).then(data => {
          this.flowData = data.CHECK_FLOW_LIST
          this.appointmentData = data.INFO
          this.getAppointmentCtrl()
          console.log(data)
        })
      }).catch(() => {
        this.Toast.showShortBottom('评价失败，请稍后重试')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import './../common.scss';
html,
body {
  height: auto;
}
.main {
  position: relative;
  height: 100%;
  min-height: fill-available;
  background-color: $bgColorMajor;
  box-sizing: border-box;
  font-size: 32px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  overflow: hidden;
  .main_area {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    padding: 1px 0;
    .vehicle_state {
      width: 622px;
      padding: 32px;
      margin: 32px auto;
      box-shadow: $boxShadow; /*no*/
      border-radius: 4px; /*no*/
      background-color: $bgColorDiv;
      /*顶部预约码*/
      h3 {
        height: 50px;
        line-height: 50px;
        font-weight: 500;
        padding-bottom: 16px;
        border-bottom: 1px solid #eee; /*no*/
      }
      .step_area {
        .step {
          height: 112px;
          position: relative;
          &::before {
            content: '';
            width: 4px;
            height: 50%;
            background-color: #3183fe;
            position: absolute;
            top: 0;
            left: 18px;
          }
          &::after {
            content: '';
            width: 4px;
            height: 50%;
            background-color: #3183fe;
            position: absolute;
            top: 50%;
            left: 18px;
          }

          i {
            width: 40px;
            height: 40px;
            display: inline-block;
            position: relative;
            z-index: 1;
            line-height: 40px;
            text-align: center;
            background-color: #fff;
            color: $themeColors;
          }
          .step_info {
            margin-left: 18px;
            .step_msg {
              .icon-info {
                color: $themeColors;
              }
            }
            .step_time {
              color: #666;
            }
          }
          .icon-gray {
            color: #ccc;
          }
          &:last-child {
            &::after {
              width: 0;
            }
          }
          &:first-child {
            &::before {
              width: 0;
            }
          }
        }
      }
    }
    /*表单区域样式*/
    .form_area {
      width: 622px;
      padding: 0 32px;
      margin: 0 auto;
      box-shadow: $boxShadow; /*no*/
      border-radius: 4px; /*no*/
      background-color: $bgColorDiv;
      .form_head {
        height: 88px;
        border-bottom: 1px solid #eee; /*no*/
        i {
          color: $themeColors;
          font-weight: 800;
        }
      }
      table {
        width: 100%;
        p {
          width: 196px;
          // height: 112px;
          margin: 22px 0;
          // line-height: 112px;
        }
        input {
          width: 418px;
          height: 44px;
          border: 0;
          margin: 34px 32px;
          &::placeholder {
            color: $fontColorMini;
          }
        }
        .long_text {
          width: 418px;
          height: auto;
          margin-left: 10px;
          color: #666;
        }
      }
    }
  }
  /*提示信息*/
  .msg {
    text-align: center;
    margin-top: 16px;
    p {
      height: 44px;
      color: $fontColorMini;
      line-height: 44px;
    }
  }
  /*底部确认按钮*/
  .confirm_btn {
    width: 686px;
    margin: auto;
    margin-top: 72px;
    margin-bottom: 94px;
    button {
      width: 100%;
      height: 72px;
      border: 1px solid $bgColorDiv; /*no*/
      border-radius: 25px; /*no*/
      background-color: $themeColors;
      color: $bgColorDiv;
    }
  }
}
/*弹窗确认是否取消预约*/
.confirm_area {
  width: 540px;
  height: fit-content;
  margin: auto;
  border-radius: 8px; /*no*/
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $bgColorDiv;
  z-index: inherit;
  h3 {
    height: 154px;
    line-height: 120px;
    text-align: center;
    font-size: 36px;
  }
  .confirm_btn_area {
    display: flex;
    border-top: 2px solid rgba(0, 0, 80, 0.05); /*no*/
    button {
      width: 50%;
      height: 86px;
      color: $detailColor;
      font-size: 34px;
      background-color: $bgColorDiv;
      border-bottom-left-radius: 8px; /*no*/
      border: 0;
    }
    .cancel_btn {
      border-left: 2px solid rgba(0, 0, 80, 0.05); /*no*/
      border-bottom-right-radius: 8px; /*no*/
    }
  }
}
</style>
